// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "../settings/effects";
@use "../settings/icons";

$color-arrow-button-fg:  -color-fg-muted   !default;
$color-list-bg:          -color-bg-default !default;
$color-list-bg-hover:    if(cfg.$darkMode, -color-base-7, -color-base-1) !default;
$color-list-bg-selected: if(cfg.$darkMode, -color-base-6, -color-base-2) !default;
$color-list-fg:          -color-fg-default !default;
$color-list-fg-hover:    -color-fg-default !default;
$color-list-fg-selected: -color-fg-default !default;
$use-alt-icon:           false !default;

@mixin _arrow($is-alt: false) {
  @if $use-alt-icon {
    $is-alt: not $is-alt;
  }

  @if $is-alt {
    @include icons.get("unfold-more", false);
  }
  @else {
    @include icons.get("arrow-drop-down", false);
  }
}

@mixin _combo-box-base() {
  -fx-background-color: -color-border-default, -color-bg-default;
  -fx-background-insets: 0, cfg.$border-width;
  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
  -fx-text-fill: -color-fg-default;
  -fx-alignment: CENTER;
  -fx-content-display: LEFT;

  &:disabled {
    -fx-opacity: cfg.$opacity-disabled;
  }

  &:success,
  &:success:focused {
    -fx-background-color: -color-success-emphasis, -color-bg-default;
  }

  &:danger,
  &:danger:focused {
    -fx-background-color: -color-danger-emphasis, -color-bg-default;
  }

  &:focused {
    -fx-background-color: -color-accent-emphasis, -color-bg-default;
  }

  // input group
  &.left-pill {
    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0 cfg.$inner-border-radius;
    -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }

  &.center-pill {
    -fx-background-radius: 0;
    -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width 0;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }

  &.right-pill {
    -fx-background-radius: 0 cfg.$border-radius cfg.$border-radius 0, 0 cfg.$inner-border-radius cfg.$inner-border-radius 0;
    -fx-background-insets: 0, cfg.$border-width cfg.$border-width cfg.$border-width 0;

    &:focused {
      -fx-background-insets: 0, cfg.$border-width;
    }
  }
}

///////////////////////////////////////////////////////////////////////////////
//  ComboBox                                                                 //
///////////////////////////////////////////////////////////////////////////////

// .combo-box-base is only applied to the ComboBox, ColorPicker and Datepicker,
// it's not applied to the ChoiceBox
.combo-box-base {

  @include _combo-box-base();

  >.arrow-button {
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;

    >.arrow {
      @include _arrow();
      -fx-background-color: $color-arrow-button-fg;
    }
  }

  >.text-field {
    -fx-background-insets: 0, cfg.$border-width 0 cfg.$border-width cfg.$border-width;
    -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius, cfg.$inner-border-radius 0 0  cfg.$inner-border-radius;
  }

  &:success {
    >.arrow-button>.arrow {
      -fx-background-color: -color-success-fg;
    }
  }

  &:danger {
    >.arrow-button>.arrow {
      -fx-background-color: -color-danger-fg;
    }
  }

  // #tweaks/alt-icon
  &.alt-icon {
    >.arrow-button>.arrow {
      @include _arrow(true);
    }
  }
}

.combo-box {

  // customize the ListCell that appears in the ComboBox button itself
  >.list-cell {
    -fx-background-color: transparent;
    -fx-text-fill: -color-fg-default;
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;
    -fx-graphic-text-gap: cfg.$graphic-gap;
  }

  &:success>.list-cell {
    -fx-text-fill: -color-success-fg;
  }

  &:danger>.list-cell {
    -fx-text-fill: -color-danger-fg;
  }
}

.combo-box-popup {
  >.list-view {
    -fx-background-color: -color-border-default, $color-list-bg;
    -fx-background-insets: 0, 1;
    -fx-border-radius: cfg.$border-radius, cfg.$inner-border-radius;
    -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
    -fx-padding: cfg.$popup-padding-y cfg.$popup-padding-x cfg.$popup-padding-y cfg.$popup-padding-x;
    @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);

    >.virtual-flow {
      >.clipped-container {
        >.sheet {
          >.list-cell {
            // reset cell size, because height is set via paddings
            // to use the same values as ChoiceBox
            -fx-cell-size: 0;
            -fx-background-color: $color-list-bg;
            -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
            -fx-padding: cfg.$menu-padding-y cfg.$menu-padding-x cfg.$menu-padding-y cfg.$menu-padding-x;
            -fx-graphic-text-gap: cfg.$graphic-gap;
            -fx-text-fill: $color-list-fg;

            #{cfg.$font-icon-selector} {
              -fx-icon-color: $color-list-fg;
              -fx-fill: $color-list-fg;
            }

            &:filled:hover {
              -fx-background-color: $color-list-bg-hover;
              -fx-text-fill: $color-list-fg-hover;

              #{cfg.$font-icon-selector} {
                -fx-icon-color: $color-list-fg-hover;
                -fx-fill: $color-list-fg-hover;
              }
            }

            &:filled:selected,
            &:filled:selected:hover {
              -fx-background-color: $color-list-bg-selected;
              -fx-text-fill: $color-list-fg-selected;

              #{cfg.$font-icon-selector} {
                -fx-icon-color: $color-list-fg-selected;
                -fx-fill: $color-list-fg-selected;
              }
            }
          }
        }
      }
    }

    // placeholder is shown to the user when the ComboBox has no content to show
    >.placeholder {
      >.label {
        -fx-text-fill: -color-fg-muted;
      }
    }
  }
}

///////////////////////////////////////////////////////////////////////////////
//  ChoiceBox                                                                //
///////////////////////////////////////////////////////////////////////////////

.choice-box {

  @include _combo-box-base();

  -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;

  >.label {
    -fx-text-fill: -color-fg-default;
  }

  >.open-button {

    >.arrow {
      @include _arrow();
      -fx-background-color: $color-arrow-button-fg;
    }
  }

  &:success {
    >.label {
      -fx-text-fill: -color-success-fg;
    }

    >.open-button>.arrow {
      -fx-background-color: -color-success-fg;
    }
  }

  &:danger {
    >.label {
      -fx-text-fill: -color-danger-fg;
    }

    >.open-button>.arrow {
      -fx-background-color: -color-danger-fg;
    }
  }

  &:disabled {
    >.label {
      -fx-opacity: 1;
    }
  }

  // #tweaks/alt-icon
  &.alt-icon {
    >.open-button>.arrow {
      @include _arrow(true);
    }
  }
}
